<template>
  <div class="loading-transition" :class="{ 'fade-out': isHiding }" v-if="visible">
    <!-- 简约背景 -->
    <div class="background-layer"></div>

    <!-- 加载内容 -->
    <div class="loading-content">
      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo-container">
          <!-- 简单的加载环 -->
          <div class="loading-ring"></div>

          <!-- 中心图标 -->
          <div class="center-logo">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12,2C8.13,2 5,5.13 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9C19,5.13 15.87,2 12,2M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5Z"/>
            </svg>
          </div>
        </div>

        <h2 class="loading-title">廉洁文化地图</h2>
        <p class="loading-subtitle">{{ currentStatus }}</p>
      </div>

      <!-- 进度条 -->
      <div class="progress-section">
        <div class="progress-container">
          <div class="progress-bar" :style="{ width: progress + '%' }"></div>
        </div>
        <div class="progress-text">{{ Math.round(progress) }}%</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadingTransition',
  data() {
    return {
      visible: true,
      isHiding: false,
      progress: 0,
      currentStatus: '初始化系统...',
      statusList: [
        '初始化系统...',
        '加载地图资源...',
        '准备标记点数据...',
        '渲染界面组件...',
        '完成加载'
      ]
    }
  },
  mounted() {
    this.startLoading()
  },
  methods: {
    startLoading() {
      // 模拟加载过程
      const loadingSteps = [
        { progress: 20, status: this.statusList[0], delay: 500 },
        { progress: 45, status: this.statusList[1], delay: 800 },
        { progress: 70, status: this.statusList[2], delay: 600 },
        { progress: 90, status: this.statusList[3], delay: 400 },
        { progress: 100, status: this.statusList[4], delay: 300 }
      ]

      let currentStep = 0
      
      const executeStep = () => {
        if (currentStep < loadingSteps.length) {
          const step = loadingSteps[currentStep]
          
          setTimeout(() => {
            this.progress = step.progress
            this.currentStatus = step.status
            
            if (step.progress === 100) {
              // 加载完成，延迟隐藏
              setTimeout(() => {
                this.hideLoading()
              }, 500)
            } else {
              currentStep++
              executeStep()
            }
          }, step.delay)
        }
      }
      
      executeStep()
    },

    hideLoading() {
      this.isHiding = true
      setTimeout(() => {
        this.visible = false
        this.$emit('loading-complete')
      }, 600)
    },

    // 移除粒子效果相关方法
  }
}
</script>

<style lang="scss" scoped>
.loading-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  animation: fadeIn 0.5s ease-out;

  &.fade-out {
    animation: fadeOut 0.6s ease-in forwards;
  }
}

// 简约背景
.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

// 加载内容
.loading-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: #334155;
}

// Logo区域
.logo-section {
  text-align: center;
  margin-bottom: 50px;
}

.logo-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
}

.loading-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #3b82f6;
}

.loading-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #1e293b;
}

.loading-subtitle {
  font-size: 14px;
  margin: 0;
  color: #64748b;
  font-weight: 400;
}

// 进度条
.progress-section {
  width: 280px;
  margin-top: 40px;
}

.progress-container {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar {
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

// 动画定义
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .loading-title {
    font-size: 20px;
  }

  .loading-subtitle {
    font-size: 13px;
  }

  .progress-section {
    width: 240px;
  }

  .logo-container {
    width: 70px;
    height: 70px;
  }

  .center-logo {
    width: 44px;
    height: 44px;

    svg {
      width: 24px;
      height: 24px;
    }
  }
}
</style>
